import React, { useEffect, useState } from 'react';
import { Form, message, Input } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { saveRefundlogisticsNote } from '../service';

const { TextArea } = Input;

const EditNoteModal = ({ visible, record, handleOk, handleCancel }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const { note, id } = record;

  useEffect(() => {
    if (Object.keys(record).length) {
      form.setFieldsValue({
        note,
      });
    }
  }, [record]);

  //校验
  const onOk = () => {
    form.validateFields().then((val) => {
      sendData(val);
    });
  };

  const sendData = async (val) => {
    setLoading(true);
    const { success } = await saveRefundlogisticsNote({ ...val, id });
    if (success) {
      message.success('修改备注成功');
      handleOk();
    }
    setLoading(false);
  };

  return (
    <CommonModal
      title="修改备注"
      visible={visible}
      onOk={onOk}
      onCancel={handleCancel}
    >
      <Form form={form} initialValues={{ note }} name="edit-notes-modal-form">
        <Form.Item name="note" label="备注">
          <TextArea
            rows={6}
            maxLength={100}
            placeholder="请输入备注,最多可输入100"
            showCount
          />
        </Form.Item>
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default EditNoteModal;
